import React, { useState, useEffect, useLayoutEffect, useMemo, useCallback } from 'react';

export default function(props) {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('test-demo');

  /* useEffect(() => {
    console.log('useEffect');
  }, []); */
  /* async function demo() {
    console.log('demo')
  } */
  useEffect(() => {
    console.log('useEffect');
    //fetch('/api/getLists');
    async function demo() {
      console.log('demo');
    }
    demo();
  }, [count]);

  /* useEffect(() => {
    console.log('useEffect 2');
    //fetch('/api/getLists');
    async function demo() {
      console.log('demo');
    }
    demo();
  }, [count]); */
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
  }, []);
  const handleCount = () => {
    console.log('count changed');
    setCount(count + 1);
  };
  /* const handleCount = useCallback(() => {
    console.log('useCallback count changed')
    setCount(count + 1)
  }, [count]) */
  const noCacheText = () => {
    console.log('noCacheText text changed');
    return text;
  };
  const memoText = useMemo(()=>{
    console.log('memoText text changed')
    return text
  }, [text])
  return (
    <div>
      <h1 onClick={handleCount}>count: {count}</h1>
      <h1>text: {memoText}</h1>
    </div>
  );
}
